<!DOCTYPE html>
<html ng-app="myApp">

<head>
	<meta charset="utf-8">
	<style>
		#div1{
			width: 300px;
			height: 100px;
			background-color: yellow;
		}
	</style>
</head>

<body>
	<div ng-controller="testCtrl">
		<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
		<p id={{dragId}} draggable="true" ondragstart="drag(event)">testhhdhd</p>
	</div>	
	<script src="angular-1.5.8/angular.min.js"></script>
	<!-- <script src="angular-1.5.8/angular-message.min.js"></script> -->
	<script>
		function allowDrop(ev) {
				ev.preventDefault();
			}

			function drag(ev) {
				ev.dataTransfer.setData("text", ev.target.id);
				console.log("drag")
			}

			function drop(ev) {
				ev.preventDefault();
				var data = ev.dataTransfer.getData("text");
				ev.target.appendChild(document.getElementById(data));
			}

		var app=angular.module('myApp', [ ]);
		app.controller('testCtrl',function($scope){
			$scope.dragId="drag1";
			console.log("dddd")
		});
	</script>
</body>

</html>